<template>
  <!-- <div class="tw-flex tw-w-full tw-h-full tw-items-center tw-justify-center"> -->
  <div>
    <p
      :style="{
        fontSize: node.model.fontSize + 'px',
        color: node.model.color,
        cursor: 'text',
      }"
      class="tw-outline-none tw-overflow-hidden"
      contenteditable
      ref="nodeRef"
      @input="textChange"
    ></p>
    <TeleportForm :node="node">
      <template #default="{ model }">
        <q-form>
          <q-input
            class="col"
            :modelValue="model.text"
            @update:model-value="modelTextChange"
            label="文本内容"
          ></q-input>
          <q-input class="col" v-model="model.fontSize" type="number" label="字体大小" />
          <div class="q-mt-md">
            <label>字体颜色</label>
            <q-input v-model="model.color"></q-input>
            <q-color v-model="model.color" format-model="hexa" />
          </div>
        </q-form>
      </template>
    </TeleportForm>
  </div>
</template>
<script>
import { defineComponent, ref, computed, onMounted } from 'vue';
import defaultProps from 'src/pages/BiographicalNotes/common/defaultProps';
import TeleportForm from '../../TeleportForm/TeleportForm.vue';
import useNodeTreeStore from 'src/stores/nodeTree';
export default defineComponent({
  name: 'TextComponent',
  props: defaultProps,
  components: { TeleportForm },
  setup(props) {
    const textTypes = [
      {
        label: '纯文本',
        value: 'span',
      },
      {
        label: '段落',
        value: 'p',
      },
      {
        label: '一级标题',
        value: 'h1',
      },
      {
        label: '二级标题',
        value: 'h2',
      },
      {
        label: '三级标题',
        value: 'h3',
      },
      {
        label: '四级标题',
        value: 'h4',
      },
      {
        label: '五级标题',
        value: 'h5',
      },
      {
        label: '六级标题',
        value: 'h6',
      },
    ];
    const nodeTreeStore = useNodeTreeStore();
    const model = computed({
      get() {
        return nodeTreeStore.treeMap[props.node.id].model;
      },
      set(value) {
        nodeTreeStore.treeMap[props.node.id].model = value;
      },
    });
    const nodeRef = ref(null);
    const textChange = (e) => {
      model.value.text = e.target.innerText;
    };
    const modelTextChange = (value) => {
      nodeRef.value.innerText = value;
      model.value.text = value;
    };
    onMounted(() => {
      nodeRef.value.innerText = model.value.text;
    });
    const showEdit = (e) => {
      nodeRef.value.focus();
      e.target.focus();
    };
    return { textTypes, showEdit, nodeRef, model, textChange, modelTextChange };
  },
});
</script>
